<template>
  <ContainerLayoutV2 ref="containerLayoutRef" class="attendance-personal">
    <template #form>
      <el-form ref="formRef" :inline="true" :model="queryForm" class="query-form" label-width="40px">
        <UserInput v-model="queryForm.user" />
        <DeptCascader v-model="queryForm.deptIds" :multiple="false" />
        <el-form-item>
          <el-button type="primary" @click="handleClickBtnSubmit" :icon="Search">查询</el-button>
          <el-button @click="handleClickBtnReset" :icon="Refresh">重置</el-button>
        </el-form-item>
      </el-form>
    </template>
    <template #tables>
      <el-table :data="tableData" v-loading="loading" element-loading-text="加载中..." scrollbar-always-on style="width: 100%" border :height="tableHeight" header-cell-class-name="table-header-row" empty-text="没有数据">
        <el-table-column prop="nickName" label="姓名" width="100" fixed />
        <el-table-column label="部门" width="120" fixed>
          <template #default="scope">{{ scope.row.dept.deptName }}</template>
        </el-table-column>
        <el-table-column prop="userName" label="用户名" width="150" />
        <el-table-column prop="phonenumber" label="电话" width="150" />
        <el-table-column prop="email" label="邮箱" width="200" />
        <el-table-column label="性别" width="55">
          <template #default="scope">{{ scope.row.sex === '0' ? '男' : '女' }}</template>
        </el-table-column>
        <el-table-column />
      </el-table>
    </template>
  </ContainerLayoutV2>
</template>
<script lang="ts" setup>
import { onMounted, ref, reactive } from 'vue'
import ContainerLayoutV2 from '../layout/ContainerLayoutV2.vue'
import DeptCascader from '../layout/FormTableLayout/DeptCascader.vue'
import UserInput from '../layout/FormTableLayout/UserInput.vue'
import { useUsersStore } from '../stores'
import { Refresh, Search } from '@element-plus/icons-vue'

const containerLayoutRef = ref<InstanceType<typeof ContainerLayoutV2> | null>(null)
const loading = ref(false)
const tableData = ref<any[]>([])
const tableHeight = ref(500)

// 表单
const queryForm = reactive({
  user: '',
  projectId: '',
  date: [],
  deptIds: [] as string[] | number[],
})
onMounted(() => {
  if (containerLayoutRef.value && containerLayoutRef.value.tableContainer) {
    const tableContainer = containerLayoutRef.value.tableContainer
    tableHeight.value = tableContainer.offsetHeight
  }
})

/**
 * 处理点击提交按钮的事件
 */
const handleClickBtnSubmit = () => {
  let deptIds = null
  let result = []
  if (queryForm.deptIds.length > 0) {
    deptIds = queryForm.deptIds[queryForm.deptIds.length - 1]
  }

  if (queryForm.user == '' && deptIds == null) {
    result = []
  } else {
    result = useUsersStore().userAllList.filter((item: any) => {
      // 用户名条件：如果queryForm.user不为空，则必须匹配，否则为true
      const userCondition = queryForm.user === '' || item.userName == queryForm.user

      // 部门条件：如果deptId不为空，则必须匹配 否则为true
      const deptCondition = deptIds == null || item.deptId == deptIds

      // 只有非空的条件才会参与过滤
      return userCondition && deptCondition
    })
  }
  tableData.value = result
}
const handleClickBtnReset = () => {
  queryForm.user = ''
  queryForm.deptIds = []
  handleClickBtnSubmit()
}
</script>
<style lang="scss" scoped></style>
